<template>
  <img class="particle" :src="item.url">
</template>

<script>
import { defineComponent } from 'vue'
import { EventBus } from '@/store/index'
import { MOBILE_WID_HEI } from '@/common/const-dif'

export default defineComponent({
  name: 'ParticleItem',
  setup() {
    return { 
      x: 0,
      y: 0,
      scale: 1,
      rotation: 0,
      alpha: 1,
      currentTime: 0,
      totalTime: 1000,
    }
  },
  props: {
    item: Object,
  },
  created() {
  },
  methods: {
    onRedBad() {
      EventBus.$emit("itemClick", {id: filterComponents[0].id, index: 0});
      EventBus.$emit("stopTick");
    },
    update() {
      let x = this.x/MOBILE_WID_HEI.adaptiveScale;
      let y = this.y/MOBILE_WID_HEI.adaptiveScale;
      let rotation = this.rotation;
      let scale = this.scale/MOBILE_WID_HEI.adaptiveScale;
      let alpha = this.alpha;
      let elem = this.$el;
      elem.style.alpha = alpha;
      elem.style.transform = "translate(" + x + "px, " + y + "px) rotate(" + rotation + "deg) scale(" + scale + ")";
    },
    reset () {
      this.x = 0;
      this.y = 0;
      this.scale = 0;
      this.rotation = 0;
      this.alpha = 0;
      this.currentTime = 0;
      this.totalTime = 1000;
    },
  }
})

</script>

<style lang="scss">
  .particle {
    position: absolute;
  }
</style>